#form {
    background: rgba(0, 0, 0, 0.15);
    padding: 0.25rem;
    display: flex; /* 子元素水平排列，填充满父元素 */
    height: 4rem;
    box-sizing: border-box; /* 让内边距和边框不会撑大元素的尺寸 */
    backdrop-filter: blur(10px); /* 背景模糊 */
}

#input {
    border: none;
    padding: 0 1rem;
    flex-grow: 1; /* 子元素填充剩下的所有空间 */
    border-radius: 2rem;
    margin: 0.25rem 0.25rem 0.25rem 0;
}

#input:focus { /* 获得焦点时 */
    outline: none; /* 去掉默认的外边框 */
}

#form > button {
    background: #b9a6ff;
    border: none;
    padding: 0 1rem;
    margin: 0.25rem;
    border-radius: 3px;
    outline: none;
    color: #fff;
    width: 8rem;
    font-size: 25px;
    cursor: pointer;
    transition: background 0.3s ease; /* 添加过渡效果 */
}
#form > button:hover {
    background: #9370db; /* 悬停时的颜色加深 */
}

#messages {
    list-style-type: none; /* 去掉列表的默认样式 */
    margin: 0;
    padding: 0;
}

#messages > li {
    padding: 0.5rem 1rem;
}

#messages > li:nth-child(odd) { /* 奇数行 */
    background: #efefef;
}

.upperBox {
    flex: 1; /* 占据剩余的高度 */
    background-color: #ddd; /* 上面盒子的背景色 */
}

.talkContent {
    height: 100%;
    background-color: #fff; /* 内部盒子的背景色 */
}
.talkContentInner {

}

.talkTop {
    height: 3rem; /* 上面盒子的高度为3rem */
}
.talkTopInner {
    color: #fff;
    text-align: center;
    line-height: 3rem; /* 与容器高度相等，实现垂直居中 */
    font-size: 25px; /* 设置文字大小，根据需要调整 */
    background-color: #b9a6ff;
}

.lowerBox {
    height: 4rem; /* 下面盒子的高度为3rem */
}